<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="userCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="userCommon::common-navbar"></nav>
<div id="layoutSidenav" class="bg-cover" style="background-image: url('/img/shequbeijingtu.jpeg')">
    <div th:replace="userCommon::common-sidenav"></div>
    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <div class="container-fluid px-4">
                    <!-- 标题居中美化 -->
                    <div class="text-center mb-4 mt-4">
                        <h1 class="display-4 text-white fw-bold shadow-sm" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.7);">会员社区</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb justify-content-center mb-0">
                                <li class="breadcrumb-item"><a th:href="@{/toUserMain}" class="text-white">主页</a></li>
                                <li class="breadcrumb-item active text-white" aria-current="page">会员社区</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <!-- 发布帖子区域 -->
                <div class="fixed-bottom-post-form">
                    <div class="card mb-0">
                        <div class="card-body p-2">
                            <form th:action="@{/community/addPost}" method="post" enctype="multipart/form-data">
                                <textarea class="form-control mb-2" name="content" rows="3" placeholder="分享你的健身心得..."></textarea>
                                <div class="d-flex justify-content-between">
                                    <input type="file" name="image" accept="image/*" onchange="validateFileSize(this)">
                                    <button type="submit" class="btn btn-primary">发布</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 帖子列表 -->
                <div class="row container-padding-115" id="postsContainer">
                    <div class="col-12" th:each="post : ${postList}">
                        <div class="card mb-4 table shadow-sm border-0 rounded-4" style="background-color: rgba(255,255,255,0.9); backdrop-filter: blur(5px);">
                            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                <strong th:text="${post.memberName}" class="text-primary">用户名</strong>
                                <small class="text-muted float-end" th:text="${#dates.format(post.createTime, 'yyyy-MM-dd HH:mm')}">时间</small>
                            </div>
                            <div class="card-body">
                                <p class="card-text" th:text="${post.content}" style="line-height: 1.6;">帖子内容</p>
                                <div th:if="${post.imageUrl}" class="text-center">
                                    <img th:src="${post.imageUrl}" class="img-fluid" alt="帖子图片" style="max-height: 300px;">
                                </div>

                                <!-- 评论区域 -->
                                <div class="mt-3">
                                    <div class="comments-section" th:id="'comments-' + ${post.id}">
                                        <div class="comment" th:each="comment : ${post.comments}" th:if="${post.comments}">
                                            <small class="d-block mb-1">
                                                <strong th:text="${comment.memberName}">评论用户名</strong>:
                                                <span th:text="${comment.content}">评论内容</span>
                                            </small>
                                        </div>
                                    </div>

                                    <div class="mt-2">
                                        <div class="input-group">
                                            <input type="text" class="form-control comment-input"
                                                   th:attr="data-post-id=${post.id}"
                                                   placeholder="发表评论..." style="border-radius: 6px;">
                                            <button class="btn btn-outline-secondary comment-btn"
                                                    th:attr="data-post-id=${post.id}"
                                                    type="button">发送</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer th:replace="userCommon::common-footer"></footer>
    </div>
</div>

<script th:inline="javascript">    /*<![CDATA[*/

// 发布帖子
function publishPost() {
    let content = document.getElementById('postContent').value.trim();
    let imageFile = document.getElementById('postImage').files[0];

    if (!content) {
        alert('请输入帖子内容');
        return;
    }

    let formData = new FormData();
    formData.append('content', content);
    if (imageFile) {
        formData.append('image', imageFile);
    }

    fetch('/community/addPost', {
        method: 'POST',
        body: formData
    })
        .then(response => {
            if (response.redirected) {
                window.location.href = response.url;
            } else {
                return response.json();
            }
        })
        .then(data => {
            if (data && !data.success) {
                alert('发布失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('发布失败，请重试');
        });
}

function validateFileSize(input) {
    const maxSize = 10 * 1024 * 1024; // 10MB
    if (input.files[0].size > maxSize) {
        alert('文件大小不能超过 10MB');
        input.value = '';
    }
}

// 发表评论
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('comment-btn')) {
        let postId = e.target.getAttribute('data-post-id');
        let input = document.querySelector('.comment-input[data-post-id="' + postId + '"]');
        let content = input.value.trim();

        if (!content) {
            alert('请输入评论内容');
            return;
        }

        fetch('/community/addComment', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'postId=' + postId + '&content=' + encodeURIComponent(content)
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 添加评论到页面
                    let commentsSection = document.getElementById('comments-' + postId);
                    let commentDiv = document.createElement('div');
                    commentDiv.className = 'comment';
                    commentDiv.innerHTML = '<small><strong>' + data.comment.memberName + '</strong>: ' + data.comment.content + '</small>';
                    commentsSection.appendChild(commentDiv);

                    // 清空输入框
                    input.value = '';
                } else {
                    alert('评论失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('评论失败，请重试');
            });
    }
});

/*]]>*/
</script>

<div th:include="userCommon::common-scripts"></div>
</body>
</html>